<template>
	<view class="bigView">
		
		<camera v-if="camerashow" v-show="!isShowImg" mode="normal" :device-position="front" binderror="cameraBindError" flash="off" frame-size="small"
		class="cameraClass"
		></camera>
		<view class="firstView" v-if="!isShowImg">
			<view class="firstTitle">请正脸出镜，并保持静止</view>
			<view class="topView">
				<view class="centerFace"></view>
			</view>
			<view class="bottomView" :style="[{height:bottom + 'px'}]">
				<view class="sure" @click="sureHandle">确定</view>
			</view>
		</view>
		<view v-show="isShowImg&&beforeimage!=''" >
			<image class="posfix" :mode="mode" :src="beforeimage"></image>
			<view class="cp" :style="[{bottom:bottom - 48 + 'px'}]">
				<view class="resetView" @click="resetTake">重拍</view>
				<view class="uploadView">上传</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zhyqCell from "@/components/zhyq_cell.vue"
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default{
		components:{
			zhyqCell
		},
		data(){
			return {
				camerashow:false,
				front:'front',
				mode:'widthFix',
				bottom:0,
				cameraCtx:null,
				beforeimage:'',
				isShowImg: false
			}
		},
		onShow() {
			this.getSetting()
		},
		onLoad() {
			this.cameraCtx = wx.createCameraContext();
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		methods:{
			getSetting(){
				var self=this
				uni.getSetting({
				    success:(res)=>{
				        if (!res.authSetting['scope.camera']){
							wx.authorize({
								scope: 'scope.camera',
								success() { // 用户同意授权
									self.camerashow=true;
								},
								fail() { // 用户不同意授权
									self.openSetting().then(res => {
										self.camerashow=false;
									})
								}
							})
				        }else{
							self.camerashow=true;
						}
				    }
				})
			},
			sureHandle(){
				if(!this.camerashow){
					this.openSetting().then(res => {
						this.camerashow=false;
					})
					return 
				}
				this.cameraCtx.takePhoto({
					quality:"high",
					success:(res)=>{
						pathToBase64(res.tempImagePath).then(base64 => {
							this.isShowImg = true
							this.beforeimage=base64
							// this.getimagetreefive(base64,res.tempImagePath)
						})
						.catch(error => {
							console.error(error)
						})
					},
					fail:(msg)=>{
						wx.showToast({
						  title: "Error，相机拍照出错！！",
						})
					},
				});
			},
			resetTake(){
				this.isShowImg = false;
				this.beforeimage = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	$faceWidth: calc(100vw - 60px);
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #000000b2;//#F7F7F7;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	// justify-content: center;
}
.cameraClass{
	position: absolute;
	width: 100%; 
	height: 100vh;
	top: 0;
	left: 0;
}
.cp{
	position: absolute;
	z-index: 2;
	width: calc(100vw - 32px);//calc(100vw-#{32px});
	height: 48px;
	border-radius: 24px;
	// background-color: #247BFD;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-direction: row;
}
.resetView{
	width: 100px;
	height: 48px;
	background-color: red;
	color: white;
	margin-right: 8px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.uploadView{
	flex-grow: 1;
	height: 48px;
	color: white;
	background-color: #247BFD;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.firstView{
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	.firstTitle{
		font-size: 20px;
		margin-top: 46px;
		color: white;	
	}
}
.posfix{
	position: absolute;
	width: 100vw;
	height: 100vh;
	top:0;
	left:0;
	z-index: 1;
}
.topView{
	flex-grow: 1;
	width: 100vw;
	// background-color: green;
	display: flex;
	justify-content: center;
}
.centerFace{
	width: $faceWidth;
	height: $faceWidth;
	// width: 316px;
	// height: 316px;
	border-radius: calc((100vw - 60px) / 2);
	margin-top: 46px;
	// width: 200px;
	// height: 200px;
	// border-radius: calc((100vw-#{60px})/2);
	border-color: #247BFD;
	// background-color: red;
	border: #247BFD solid 6px;
}
.bottomView{
	height: 150px;
	width: 100vw;
	// background-color: yellow;
	display: flex;
	justify-content: center;
	.sure{
		width: calc(100vw - 32px);//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
}
</style>